import React, {CSSProperties, FC, useEffect} from 'react';

/**
 * 按钮样式类型值
 */
type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
type ButtonSize = 'large' | 'small';

/**
 * Button属性
 */
interface ButtonProps {
    /**
     * 按钮样式类型. 默认:light
     */
    type?: ButtonType,
    /**
     * 使用颜色边框而非背景色. 默认:false
     */
    outline?: boolean;
    /**
     * 按钮大小
     */
    size?: ButtonSize;
    /**
     * 是否为块级按钮. 默认:false 块级按钮会填充整个块
     */
    block?: boolean;
    /**
     * 是否禁用. 默认:false
     */
    disabled?: boolean;
    /**
     * 点击事件
     * @param evt
     */
    onClick?: React.MouseEventHandler<HTMLElement>;
    /**
     * 类
     */
    className?: string;
    /**
     * 独立样式属性
     */
    style?: CSSProperties
}

interface ButtonProperties {
    disabled?: boolean;
    onClick?: React.MouseEventHandler<HTMLElement>;
    style?: CSSProperties;
}

/**
 * 按钮
 * @param props
 * @constructor
 */
const OtherName: FC<ButtonProps> = (props) => {
    const {children, type = 'light', outline = false, size, block = false, disabled = false, onClick, className = '', style} = props;

    useEffect(() => {
        console.log('index 组件挂载完毕!');
    }, []);

    console.log('index 组件render!');
    const btnCls = outline ? `btn-outline-${type}` : `btn-${type}`
    const sizeCls = !size ? '' : size === 'small' ? 'btn-sm' : 'btn-lg'
    const blockCls = block ? 'btn-block' : '';
    const obj: ButtonProperties = {};
    if (onClick) {
        obj.onClick = (evt) => {
            // @ts-ignore
            console.log('evt', evt, Object.prototype.toString.call(evt).match(/\[object (.*?)\]/)[1])
            if (!disabled) {
                // 只有按钮在非禁用状态, 才触发真实的点击事件
                return onClick(evt);
            }
        };
    }
    if (disabled) {
        obj.disabled = disabled;
        // @ts-ignore
        obj['aria-disabled'] = disabled;
    }
    if (style) {
        obj.style = style
    }
    return (
        <button type="button"
                className={`btn ${btnCls} ${sizeCls} ${blockCls} ${className}`} {...obj}>{children}</button>
    );
};
OtherName.defaultProps = {
    type: 'light'
}
export default OtherName;
